<template>
	<view class="activity-clues">
		<view class="activity-clues-header">
			<view class="group-state-contain">
				<view :class="groupStatusIndex==index?'group-state-active':''" v-for="(item,index) in activityclue" :key='index' data-index="index" @click="changeIndex(index)">
					{{item}}
				</view>
			</view>
		</view>
		<!-- 所有线索 -->
		<view class="parent-clues-content" v-for="(item,index) in activityClueModule" :key="index" v-if="!groupStatusIndex">
			<view class="">
				<image :src="item.user_info.avatar" mode="" class="parent-clues-content-icon"></image>
				<view class="parent-clues-content-datagroup">
					<view class="" style="font-size: 32upx; font-weight: bold; height: 44upx;">{{item.user_info.nickname}}</view>
					<view class="" style="font-size: 28upx; margin-top: 30upx;">手机号：{{item.user_info.phone}}</view>
				</view>
				<button class="copynikename-btn" style="color: #FF664F;" type="default" @click="copyData(item.user_info.nickname)">复制昵称</button>
				<button class="callphone-btn" style="color: #FFFFFF;" type="default" @click="callPhone(item.user_info.phone)">拨打电话</button>
			</view>
			<view style="height: 2upx; background-color: #F2F2F2; margin: 50upx 0upx 30upx 0upx;"></view>
			<view class="" style="font-size: 24upx; color: red;">
				<view class="" style="display: inline-block; margin-bottom: 10upx;">
					访问活动时间：{{ item.recent_time | formatDates}}
				</view>
			</view>
		</view>
		<!-- 邀请排行 -->
		<view class="parent-clues-content" v-for="(item,index) in activityClueModule" :key="index" v-if="groupStatusIndex">
			<view class="">
				<image :src="item.user_info.avatar" mode="" class="parent-clues-content-icon"></image>
				<view class="parent-clues-content-datagroup">
					<view class="" style="font-size: 32upx; font-weight: bold; height: 44upx;">{{item.user_info.nickname}}</view>
					<view class="" style="font-size: 28upx; margin-top: 30upx;">手机号：{{item.user_info.phone}}</view>
				</view>
				<button class="copynikename-btn" style="color: #FF664F;" type="default" @click="copyData(item.user_info.nickname)">复制昵称</button>
				<button class="callphone-btn" style="color: #FFFFFF;" type="default" @click="callPhone(item.user_info.phone)">拨打电话</button>
			</view>
			<view style="height: 2upx; background-color: #F2F2F2; margin: 50upx 0upx 30upx 0upx;"></view>
			<view class="" style="font-size: 24upx; color: red; margin-bottom: 10upx;">
				<view class="" style="display: inline-block;">
					访问活动时间：{{ item.recent_time | formatDates }}
				</view>
				<view style="height: 2upx; background-color: #F2F2F2; margin: 30upx 0upx 30upx 0upx;"></view>
				<view class="" style="display: inline-block; right: 70upx; color: #E41D1D; font-weight: bold;">
					邀请了{{ item.invite_num }}人
				</view>
				<view class="" @click="foldOpen(index)"  v-if="fold != index + 1" style="display: inline-block;margin-left: 30upx;">
					<view class="" style="display: inline-block; color: #007AFF;">
						展开详情
					</view>
					<view class="" style="display: inline-block; margin-left: 10upx;">
						<view class="lower-bracket"></view>
						<view class="lower-bracket"></view>
					</view>
				</view>
				<view class="" @click="foldOpen(index)"  v-if="fold == index + 1" style="display: inline-block;margin-left: 30upx;">
					<view class="" style="display: inline-block; color: #007AFF;">
						收起
					</view>
					<view class="" style="display: inline-block; margin-left: 10upx; vertical-align: middle;">
						<view class="upper-bracket"></view>
						<view class="upper-bracket"></view>
					</view>
				</view>
			</view>
			<view class="" v-if="fold == index + 1">
				<view class="parent-clues-fold-content" v-for="(list,number) in item.invite_detail" :key="number">
					<view class="">
						<image :src="list.info.avatar" mode="" class="parent-clues-fold-content-icon"></image>
						<view class="parent-clues-content-datagroup">
							<view class="" style="font-size: 32upx; font-weight: bold; height: 44upx;">{{list.info.nickname}}</view>
							<view class="" style="font-size: 24upx; margin-top: 30upx;">手机号：{{list.info.phone}}</view>
						</view>
						<button class="copynikename-btn" type="default" style="right: 80upx;color: #FF664F;" @click="copyData(list.info.nickname)">复制昵称</button>
						<button class="callphone-btn" type="default" style="right: 80upx; margin-top: 72upx;color: #FFFFFF;" @click="callPhone(list.info.phone)">拨打电话</button>
					</view>
					<view style="height: 2upx; background-color: #F2F2F2; margin: 30upx 0upx 30upx 0upx;"></view>
					<view class="" style="font-size: 24upx; color: red;">
						<view class="" style="display: inline-block; margin-left: 30upx;">
							访问活动时间：{{ list.recent_time | formatDates}}
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// #ifdef H5
		import h5Copy from '@/js_sdk/junyi-h5-copy/junyi-h5-copy/junyi-h5-copy.js'
	// #endif
	export default {
		data() {
			return {
				fold: '',
				groupStatusIndex:0,
				activityclue:['所有线索','邀请排行'],
				activityClueModule:[
					
				],
				activityClueRanking:[
					
				],
				store_id:'',
				page:1,
				pagesize:10,
				recomLastPage:0,
				actId:'',
				title:''
			}
		},
		filters: {
			getStr(str, new_length) {
			// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
			formatDates(value) {
			let date = new Date(value * 1000);
			let y = date.getFullYear();
			let MM = date.getMonth() + 1;
			MM = MM < 10 ? ('0' + MM) : MM;
			let d = date.getDate();
			d = d < 10 ? ('0' + d) : d;
			let h = date.getHours();
			h = h < 10 ? ('0' + h) : h;
			let m = date.getMinutes();
			m = m < 10 ? ('0' + m) : m;
			let s = date.getSeconds();
			s = s < 10 ? ('0' + s) : s;
			return y + '-' + MM + '-' + d + '  ' + h + ':' + m + ':' + s;
			}
		},
		onLoad(options){
			let store_id = parseInt(options.store_id,10);
			console.log('进入了onload 获取url的store_id',store_id)
			this.store_id = store_id
			this.actId = parseInt(options.acid,10);
			this.getActivityClue('all')
			this.getActList()
		},
		methods: {
			foldOpen(index){
				if(index + 1 == this.fold){
					this.fold = 0
				}else {
					this.fold = index + 1
				}
			},
			changeIndex(index){
				this.groupStatusIndex = index
				if( index == 0 ){
					this.getActivityClue('all')
				}else{
					this.getActivityClue('rank')
				}
				console.log(index);
			},
			// #ifdef H5
				// 复制昵称
				copyData(copyText) {
					console.log('点击了复制');
					let content = copyText // 复制内容，必须字符串，数字需要转换为字符串
					const result = h5Copy(content)
					if (result === false) {
						uni.showToast({
							title: '不支持',
						})
					} else {
						uni.showToast({
							title: '复制成功',
							icon: 'none'
						})
					}
				},
			// #endif
			// #ifdef MP-WEIXIN
				copyData(wechatNumber) {
					uni.setClipboardData({
						data: wechatNumber,
						success: function (res) {
							uni.getClipboardData({
								success: function (res) {
									console.log(res.data) // data
								}
							})
						}
					})
				},
			// #endif
			// 拨打
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
					success(res) {
						console.log(res)
					},
					fail(err) {
						console.log(err)
					}
				})
			},
			getActivityClue(type){
				console.log("getParent",this.$store.getters.getToken)
				let data = {
					token:this.$store.getters.getToken,
					store_id:this.store_id,
					type:type,
					activity_id: this.actId
				}
				console.log("8888888",data);
				// 3.发送请求
				this.$api.get_activityClue(data).then(res => {
					console.log(res,"545454");
					if(res.status){
						this.activityClueModule = res.data.data
						console.log(this.activityClueModule,'所有线索')
						
						// let clues = res.data.data
						// let temp = []
						// for(let i = 0; i < clues.length-1; i++){
						//     for(let j = 0;j < clues.length-1; j++){
						//         if(clues[j].invite_num > clues[j+1].invite_num){
						//             temp = clues[j];
						//             clues[j] = clues[j+1];
						//             clues[j+1] = temp;
						//         }
						//     }
						// }
						// this.activityClueRanking = clues
						// console.log(this.activityClueRanking,'邀请排行')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			getActList() {
				console.log(this.actId, 'this.actId')
				this.page = 1
				let data = {
					token: this.$store.getters.getToken,
					activity_id: this.actId
				}
				this.$api.gain_all_act(data).then(res => {
					console.log(res, 'gain_all_act')
					if (res.status) {
						this.title = res.list.data[0].name
						// #ifdef MP-WEIXIN
							uni.setNavigationBarTitle({
								title: this.title
							});
						// #endif
					} else {
						uni.showToast({
							title: res.msg,
							icon: "none",
							duration: 2000
						})
					}
				}).catch(err => {
					console.log(err)
				})
			},
		}
	}
</script>

<style>
	.activity-clues{
		background-color: #eaeaea; 
		height: 100%; 
		padding-bottom: 20upx;
	}
	.activity-clues-header{
		padding: 20upx 150upx;
		background-color: #ffffff;
	}
	.group-state-contain{
		width: 450upx;
		height: 64upx;
		line-height: 64upx;
		display: flex;
		background: #F2F2F2;
		border-radius: 32upx;
	}
	.group-state-contain>view{
		width: 50%;
		text-align: center;
		color: #666666;
		font-size: 28upx;
		border-radius: 32upx;
	}
	.group-state-contain .group-state-active{
		background: linear-gradient(to right,#FE9543,#FF664F);
		color: #FFFFFF;
	}
	.parent-clues-content{
		margin: 30upx;
		padding: 40upx 35upx 20upx 35upx;
		border-radius: 16upx;
		background-color: #ffffff;
	}
	.parent-clues-content-icon{
		width: 120upx; 
		height: 120upx; 
		vertical-align: middle;
		border-radius: 80upx;
	}
	.parent-clues-content-datagroup{
		display: inline-block; 
		margin-left: 20upx; 
		vertical-align: middle;
		margin-top: 8upx;
	}
	.copynikename-btn{
		position: absolute;
		display: inline-block;
		right: 60upx;
		width: 160upx;
		line-height: 45upx;
		font-size: 24upx;
		border-radius: 15upx;
		background-color: #ffffff;
		border: 1upx solid #FF664F;
		color: #FF664F;
		border-radius: 45upx;
		margin-top: 6upx;
		vertical-align: middle;
	}
	.callphone-btn{
		position: absolute;
		display: inline-block;
		right: 60upx;
		width: 160upx;
		line-height: 45upx;
		font-size: 24upx;
		border-radius: 15upx;
		color: #ffffff;
		background-image: linear-gradient(90deg, #FE9543 14%, #FF664F 100%);
		border-radius: 45upx;
		margin-top: 77upx;
		vertical-align: middle;
	}
	.parent-clues-fold-content{
		padding: 20upx 0upx;
		background-color: #eaeaea;
		border-radius: 10upx;
		margin: 20upx 0;
	}
	.lower-bracket{
		width: 5px;
		height: 5px; 
		border-bottom: 1px solid #007AFF; 
		border-right: 1px solid #007AFF; 
		transform: rotate(45deg);
	}
	.upper-bracket{
		width: 5px;
		height: 5px; 
		border-top: 1px solid #007AFF; 
		border-left: 1px solid #007AFF; 
		transform: rotate(45deg);
	}
	.parent-clues-fold-content-icon{
		width: 100upx;
		height: 100upx; 
		margin-left: 30upx;
		vertical-align: middle;
		border-radius: 80upx;
	}
</style>
